<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			.sum{
				display: flex;
				width: 1000px;
				height: 400px;
				border: 1px solid #ccc;
				margin: 20px auto;
				flex-direction: column;
				justify-content: space-around;
				border-radius: 20px;
			}
			.line{
				width: 100%;
				height: 100px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.letter{
				width: 60px;
				height: 60px;
				border: 1px solid #CCCCCC;
				background-color: white;
				border-radius: 10px;
				text-align: center;
				line-height: 60px;
				margin:0 10px;
			}
		</style>
	</head>
	<body>
		<div class="sum">
			<div class="line">
				<div class="letter q">q</div>
				<div class="letter w">w</div>
				<div class="letter e">e</div>
				<div class="letter r">r</div>
				<div class="letter t">t</div>
				<div class="letter y">y</div>
				<div class="letter u">u</div>
				<div class="letter i">i</div>
				<div class="letter o">o</div>
				<div class="letter p">p</div>
			</div>
			<div class="line">
				<div class="letter a">a</div>
				<div class="letter s">s</div>
				<div class="letter d">d</div>
				<div class="letter f">f</div>
				<div class="letter g">g</div>
				<div class="letter h">h</div>
				<div class="letter j">j</div>
				<div class="letter k">k</div>
				<div class="letter l">l</div>
			</div>
			<div class="line">
				<div class="letter z">z</div>
				<div class="letter x">x</div>
				<div class="letter c">c</div>
				<div class="letter v">v</div>
				<div class="letter b">b</div>
				<div class="letter n">n</div>
				<div class="letter m">m</div>
			</div>
		</div>
		<script type="text/javascript">
			var body = document.body;
			var test = {};
			body.onkeypress = function(event){
				letter = document.querySelector('.'+event.key);
				letter.style.backgroundColor = 'gray';
				test[event.key] = 1;
				totalNum = Object.keys(test).length
				if(totalNum==26){
					alert('测试完成')
				}
			}
		</script>
	</body>
</html>
